<script>
import { gsap,} from 'gsap';
import { ScrollTrigger } from "gsap/ScrollTrigger";
// import { onClickOutside } from '@vueuse/core'
// import { OnClickOutside } from '@vueuse/components'
export default{
    data(){
        return{
            isdis:false,
            // istart:true,
        }
    },
    methods:{
        show(){
             gsap.registerPlugin(ScrollTrigger)
             ScrollTrigger.create({
             trigger:'.boxtwo',
              start:'top+=15 top',
              end:'+=600',
              scrub:true,
            //  pin:true,
            //  markers:true,
             animation:gsap.timeline()
             .to('.boxtwo',{x:-300,y:500,scale:0.7},'<')
             .to('.boxbody',{x:-800,y:100,scale:1.3},'<')
             })
        }
        
    },
    mounted(){
        this.show()
    },
}
</script>
<template>
    <div  class="boxtwo" >
          <div class="boxbody">
            <p class="hi">你好啊！我是</p>
            <p class="name" >Kuang &nbsp;Fengyi</p>
            <div class="bottome" >
                <p class="worktype">前端开发</p>
                <p class="person">个人简介</p>
                <div class="bottom" >
                    <p>佳木斯&nbsp;|&nbsp;学生&nbsp;|&nbsp;佳木斯大学&nbsp;|&nbsp;2020-2024</p>
                    <p>一名在佳木斯上学的普通大学生</p>
                    <p>计算机科学与技术专业 &nbsp;  &nbsp; 掌握计算机基础知识</p>
                    <p>在众多的方向中选择了&nbsp;&nbsp;前端</p>
                    <p>或许是因为我喜欢构建各种简介而美观的动画</p>
                    <p ref="a">喜欢探索各种新技术</p>
                </div>
            </div>
          </div>
    </div>
</template>
<style lang="less" scoped>
.boxtwo{
    width: 100%;
    height: 785.2px;
    position: relative;
    border-radius: 30px;
    background-image: url('../assets/2.jpg');
    background-color: #140e0e;
    .boxbody{
        width: 30%;
        height: 60%;
        position: absolute;
        display: flex;
        top: 20%;
        right: 3%;
        flex-direction:column;
        justify-content: space-around;
        font-family: "Helvetica Neue", "Arial", sans-serif;
        font-style: italic;
        font-weight: 100;
        .hi{
            font-size: 30px;
            font-family: "Helvetica Neue", "Arial", sans-serif;
            font-style: italic;
            font-weight: 100;
            color: white;
        }
        .name{
            font-size: 70px;
            background-image: linear-gradient(to top, #a630cd, #47e7c7); 
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .bottome{
            width: 100%;
            height: 65%;
            display: flex;
            flex-direction:column;
            justify-content: space-around;
            // color: white;
            // background-image: linear-gradient(to top, #fa06ed, #1b3bbd); 
            background-image: linear-gradient(to top, #11e642, #fefefc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            .worktype{
                font-size: 20px;
                background-image: linear-gradient(to top, #00d8f9, #d6e810); 
                -webkit-background-clip: text;
               -webkit-text-fill-color: transparent;

            }
            .person{
                font-size: 20px;
            }
            .bottom{
                font-size: 20px;
                background-image: linear-gradient(to top, #c2dbe4, #fefefc);
               -webkit-background-clip: text;
               -webkit-text-fill-color: transparent;
            }
        }

    }
}
</style>